<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0px;
            margin: 0px;
        }
        .wrap {
            width: 400px;
            height: 400px;
            background: skyblue;
            /* padding: 1px; */
            /* border: 1px solid black; */
            /* position: absolute; */
            /* overflow: hidden;  */
        }
         /* 推荐: 大企业使用 */
        /* .wrap::before {  */
        .wrap:before {     
            display: table;
            content: '';
        }    
        .box1{
            margin-top: 50px;
            width: 100px;
            height: 100px;
            background: rgb(230, 71, 79);
            /* margin-bottom: 100px; */
        }
        .box2{
            width: 100px;
            height: 100px;
            background: rgb(71, 230, 127);
            /* margin-top: 50px; */
        }
    </style>
</head>
<body>
    <h1>外边距重叠</h1>
    <hr>
    <div class="wrap">
        <!-- <table></table> -->
       <div class="box1"></div>
       <div class="box2"></div>
    </div>

    <!--
        box1 与 box2 : 两个box之间的实际距离是100px
        原因 ：浏览器在渲染两个相邻的box时，如果垂直方向且相邻的box设置了上下外边距，则浏览器
            只会取最大的那个外边距值。从浏览器的调试工具中可以看到，实际较小的那个外边距也有设置，
            只是两边的外边距发生了重叠

        父子外边距重叠 ： 
            当父子容器的外边距重叠时，若此时设置了子容器的外边距，则该外边距会自动应用到父容器上
        解决方案 ： 
            1.在容器添加任意内容 
            2.给父容器设置padding或margin来阻止边框重叠问题（设置padding或边框,此方法局限）
            3.给父容器设置绝对定位
            4.给父容器设置overflow (hidden / auto)
            5.在父容器中添加一个空的table,触发BFC(空的table会触发BFC：块级格式化上下文） 
            6.父级div定义伪类 :before (优化5的使用，大厂推荐)
    -->
</body>
</html>